'use strict';
import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    Image,
    Text,
    Dimensions,
    TouchableOpacity
} from 'react-native';
import AllCommentPage from '../Pages/AllCommentPage';
import Toast from '../Utils/toast';
import {_renderStar} from '../Utils/ViewUtils';
import CommentItemView from './CommentItemView';

const window = Dimensions.get('window');

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    content: {},
    whoCame: {
        width: window.width,
        textAlignVertical: 'center',
        borderColor: '#F2F3F5',
        borderBottomWidth: 1,
        textAlign: 'center',
        padding: 10,
        backgroundColor: 'white',
    },
    flexRow: {
        flexDirection: 'row',
        padding: 15,
        alignItems: 'center',
        borderTopWidth: 15,
        borderBottomWidth: 1,
        borderColor: '#F2F3F5'
    },
});

class CommentStarView extends Component {

    showAllComment() {
        let commentList = this.props.commentList;
        let id = this.props.id;
        let type = this.props.type;
        this.props.navigator.push({
            name: 'AllCommentPage',
            component: AllCommentPage,
            passProps: {
                commentList: commentList,
                id: id,
                type: type,
            }
        })
    }

    render() {
        let {
            commentList,
            star,
        } = this.props;
        return (
            <View style={styles.container}>
                {commentList.length > 0 ?
                    <View style={styles.container}>
                        <View style={styles.flexRow}>
                            <Text>总评：</Text>
                            {_renderStar(star, {marginTop: 0})}
                            <Text style={{
                        textAlign: 'center'
                    }}>{commentList.length}条评论</Text>
                        </View>
                        <View style={styles.content}>
                            {
                                commentList ?
                                    commentList.map((item, index) => {
                                        if (index >= 3) {
                                            return
                                        }
                                        return (
                                            <View key={'comment' + index}>
                                                <CommentItemView numberOfLines={3} item={item}
                                                                 navigator={this.props.navigator}/>
                                            </View>
                                        )
                                    }) : null
                            }
                            <TouchableOpacity onPress={() => this.showAllComment()}>
                                <View
                                    style={{flexDirection:'row',justifyContent:'center',alignItems:'center',height:45}}>
                                    <Text style={{color: '#38D68B',fontSize: 16}}>查看全部评论</Text>
                                    <Image
                                        style={{width: 15, height: 15, marginLeft: 5,marginTop: 2, resizeMode: 'contain'}}
                                        source={require('../../Image/icon_green_arrow.png')}
                                    />
                                </View>

                            </TouchableOpacity>
                        </View>
                    </View> : null}
            </View>
        )
    }
}

CommentStarView.propTypes = {
    navigator: React.PropTypes.object.isRequired,
    commentList: React.PropTypes.array.isRequired,
};

export default CommentStarView;